<!-- 课程目录 -->
<template>
    <div v-loading="loading" class="course-tree">
        <tree-index
            v-if="treeData && treeData.length"
            :data="treeData"
            :is-buy-person="isBuyPerson"
            :is-creater="isCreater"
            page-type="detail"
            @node-click="checkClick"
            defaultExpandAll
            :is-preview="isPreview"
            :courseWare-state-info-list="courseWareStateList"
        >
        </tree-index> 
        <div class="no-data" v-else>
			<NoData info="暂无课程目录" url="no-data@2x.png" />
		</div>
    </div>
</template>

<script setup>
import { ref, watch, computed, nextTick } from 'vue';
import TreeIndex from '@/components/catalogue/tree.vue';
import NoData from '@/components/no-data.vue';
import { useStore } from 'vuex'
import { useRoute } from 'vue-router';

const route = useRoute();

const store = useStore()

const props = defineProps({
    currentTab: {
        type: String,
        default: ''
    },
    detail: {
        type: Object,
        default: () => {
            return {};
        }
    },
    isCreater: { // 是否是创建者
        type: Boolean,
        default: false
    },
    isBuyPerson: { // 是否是购买者
        type: Boolean,
        default: false
    },
    isManage: { // 是否是从管理中心进入的并且有查看详情的权限
        type: Boolean,
        default: false
    },
    isPreview: { // 是否是预览状态
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['obtain-course']);

const currentTabKey = ref('CourseCatalogue');

const detailData = computed(() => {
    return props.detail;
})

const treeData = ref([]);

const loading = ref(false);

async function getCategory(node) {
    if (!detailData.value?.id || !detailData.value?.courseList || !detailData.value?.courseList[0]) {
        return;
    }
    try {
        loading.value = true;
        let res = await G_transmit('moocCatalogue', {
            data: {
                courseId: detailData.value.courseList[0].id, // 课程id
                pid: node?.data?.catalogueId || 0, // 父级ID
                moocId: detailData.value.id // 目录层深 默认4
            }
        })
        loading.value = false;
        treeData.value = res.data || [];
   } catch (_err) {
        loading.value = false;
        console.log(_err);
   }
}

const courseWareStateList = ref([]) // tree课件对应状态集合

// 获取课件完成状态进度等信息
async function getCourseWareStatusInfo() {
    if (!route.params?.moocId || !props.detail.courseList[0].id) {
        return;
    }
    try {
        let res = await G_transmit('courseWareStatus', {
            data: {
                courseId: props.detail.courseList[0].id, // 课程id
                moocId: route.params.moocId 
            }
       })
       courseWareStateList.value = res.data || []
       
   } catch (_err) {
       loading.value = false;
       console.log(_err);
   }
}

// 跳转
async function checkClick(data) {
    if(data.catalogueType === 1) { // 目录类型{0.文件目录1课件}
        // 没有登录必须登录
        await store.dispatch('checkIsLogout');

        // 不是创建者、没报名、不是管理者不能进入目录
        if(!props.isCreater && !props.isBuyPerson && !props.isManage) {
            emit('obtain-course');
            return;
        }
        let pathNameMap = {
            'detail': 'catalogueDetail',
            'manageDetail': 'manageCatalogueDetail',
            'previewDetail': 'previewCatalogueDetail',
            'strainDetail': 'strainCatalogueDetail',
        }
        G_go({name: pathNameMap[route.name], params: {moocId: detailData.value.id }, query: { catalogueId: data.catalogueId, courseId: detailData.value.courseList[0].id}})
    }
}

watch(() => props.detail, async(newVal) => {
    await nextTick();
    if(props.currentTab === currentTabKey.value && props.detail.id) {
        getCategory();
        getCourseWareStatusInfo();
    }

}, { immediate: true, deep: true });
</script>

<style lang="scss" scoped>
.course-tree {
    margin: 30px 20px 30px 20px;
}

</style>
